<template>
  <div class="container">
    <view class="bgImage">
      <image src="https://oss.seenlove.com/images/d6ae0c5478cb5383223e3c6cf4198411.png" mode="widthFix" />

      <view class="top flex alignCenter" :style="navBarStyle">
        <view class="box">
          <view class="back" @click="proxy.$utils.back()">
            <view class="icon">
              <uv-icon name="arrow-leftward" color="white" size="18" bold></uv-icon>
            </view>
          </view>
        </view>

        <view class="navTitle fz18 bold box textCenter">会员中心</view>
        <view class="box"></view>
      </view>

      <view class="type">
        <view class="name fz14">用户4241</view>
        <view class="desc fz12">尚未开通会员，无法享受权益</view>
        <view class="tag fz12">未开通</view>
      </view>
    </view>

    <view class="content">
      <view class="title bold textCenter">成为瞬联会员</view>
      <view class="fz14 textCenter">解锁全部功能</view>

      <view class="list flex alignCenter">
        <view class="box" :class="{active:current==index}" @click="current=index" v-for="(item,index) in 6" :key="index">
          <view class="name fz12">连续包月</view>
          <view class="oldPrice fz12 bold">¥25</view>
          <view class="newPrice bold">¥18</view>
        </view>
      </view>
    </view>

    <!-- 特权 -->
    <view class="privilege">
      <view class="title fz14 bold">VIP特权：解锁六大权益，轻松找CP</view>
      <view class="list grids gridColumns3">
        <view class="box flex alignCenter" v-for="(item,index) in privileges" :key="index">
          <uv-image :src="item.icon" shape="circle" width="36px" height="36px"></uv-image>
          <view class="fz12 name">{{item.name}}</view>
        </view>
      </view>
    </view>

    <!-- 自动续费 -->
    <view class="automaticRenewal">
      <view class="title fz14 bold">注意事项</view>
      <view class="desc fz12">{{attentionMembers}}</view>
    </view>

    <!-- 支付按钮 -->
    <view class="actionBtn flex alignCenter justifyBetween">
      <view class="left">
        <view class="fz14">支付18元，开通超级会员</view>
        <view class="fz10">支付18元，开通超级会员</view>
      </view>
      <view class="btn fz16">去支付</view>
    </view>
  </div>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();

let current = ref(0);
let privileges = ref([
  {
    name: "提高曝光",
    icon: "https://oss.seenlove.com/images/c847a1ad19a7a13a6bac3ee3f0fd9115.png",
  },
  {
    name: "谁看过我",
    icon: "https://oss.seenlove.com/images/98e5850541dee440eff7aba96f2e41b3.png",
  },
  {
    name: "解锁个人资料",
    icon: "https://oss.seenlove.com/images/5a74c3b593c7a536b39b627a22d7ab78.png",
  },
  {
    name: "筛选条件",
    icon: "https://oss.seenlove.com/images/bce7f4e8bc2199cd38fb1994f6258106.png",
  },
  {
    name: "访客信息",
    icon: "https://oss.seenlove.com/images/b0e5483c3d69b89746858bdd734cd9d0.png",
  },
  {
    name: "解锁随机身份",
    icon: "https://oss.seenlove.com/images/24f6c3e6f5d72a15f31dd0c5bfa31c9a.png",
  },
]);
let attentionMembers = ref("");

let navBarStyle = computed(() => {
  return {
    top: counter.statusBarHeight + 6 + "px",
  };
});

onMounted(() => {
  getDicts();
});

async function getDicts() {
  let data = await proxy.$apis.getOpenScreenMsg({
    configKey: "attention_members",
  });
  attentionMembers.value = data[0].configValue;
  console.log(data);
}
</script>



<style lang="scss" scoped>
.container {
  padding-bottom: 100px;
  overflow-x: hidden;
  .bgImage {
    position: relative;
    background: linear-gradient(to bottom, #eaeffd, #d1daf9);

    .top {
      position: absolute;
      width: 100%;
      padding: 0 15px;
      left: 0;
      right: 0;
      .box {
        width: calc(100% / 3);
      }
      .navTitle {
        margin-right: 15px;
      }
      .back {
        width: 28px;
        height: 28px;
        background: #000000;
        border-radius: 50%;
        position: relative;
        .icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .type {
      width: calc(100% - 80px);
      margin: auto;
      background: linear-gradient(to right, #fff0cc, #daf9ff);
      border: 1px solid #ffffff;
      border-radius: 8px 8px 0 0;
      padding: 11px 13px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      .name {
        padding-bottom: 3px;
      }
      .tag {
        position: absolute;
        right: 0;
        top: 0;
        color: #7b3319;
        background-color: #fa8320;
        padding: 2px 13px;
        border-radius: 0 8px 0 11px;
      }
    }
  }

  .content {
    padding: 18px 0;
    .title {
      font-size: 22px;
      margin-bottom: 2px;
    }
    .list::-webkit-scrollbar {
      display: none;
    }
    .list {
      overflow-y: auto;
      margin-top: 18px;
      .active {
        background: linear-gradient(to bottom, #dee8ff, #ffffff);
        border-color: #9e06ff !important;
        padding: 20px 75px 17px 13px !important;
        .newPrice {
          color: #9e06ff !important;
        }
      }
      .box {
        border: 2px solid #e5e5e5;
        border-radius: 8px 24px 8px 8px;
        padding: 20px 40px 17px 13px;
        margin-left: 10px;
        .name {
          color: #48116a;
          white-space: nowrap;
        }
        .oldPrice {
          color: #48116a;
          text-decoration: line-through;
          padding: 6px 0 18px;
        }
        .newPrice {
          color: #410e62;
          font-size: 22px;
        }
      }
    }
  }

  .privilege {
    margin-top: 26px;
    padding: 0 16px;
    .list {
      gap: 17px 0px; //上下间距 左右间距
      margin-top: 22px;
      .box {
        .name {
          margin-left: 4px;
        }
      }
    }
  }

  .automaticRenewal {
    margin-top: 20px;
    padding: 0 16px;
    .desc {
      color: #999999;
      margin-top: 5px;
      white-space: pre-wrap;
    }
  }

  .actionBtn {
    background-color: #000000;
    border-radius: 8px;
    color: white;
    width: calc(100% - 32px);
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 25px;
    .left {
      padding: 8px 12px;
    }
    .btn {
      background: #9e06ff;
      padding: 12px 20px;
      border-radius: 8px;
    }
  }
}
</style>





